<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jsMind</title>
    <link type="text/css" rel="stylesheet" href="./style/jsmind.css" />
    <style type="text/css">
        *{
          box-sizing: border-box;
        }
        html,body,#layout{
          width: 100%;
          height: 100%;
          padding: 0;
          margin: 0;
          display: flex;
          overflow: hidden;
        }
        #jsmind_container{
          flex: 1 1 auto;
          height: 100%;
          border: solid 1px #ccc;
          background:#f4f4f4;
          overflow: hidden;
        }
        .jsmind-inner{
          overflow: hidden;
        }
    </style>
</head>
<body>
<div id="layout">
  <div id="jsmind_container"></div>
</div>
<!-- 参考： -->
<script type="text/javascript" src="./js/jsmind.js"></script>
<script type="text/javascript" src="./js/jsmind.draggable.js"></script>
<script type="text/javascript" src="./js/jsmind.screenshot.js"></script>
<script type="text/javascript">
    var _jm = null;
    var js_options = {
      container: 'jsmind_container',
      theme: 'greensea',
      editable: true,
      view:{
        engine: 'canvas',   // 思维导图各节点之间线条的绘制引擎
        hmargin: 100,        // 思维导图距容器外框的最小水平距离
        vmargin: 50,         // 思维导图距容器外框的最小垂直距离
        line_width: 2,       // 思维导图线条的粗细
        line_color: 'red'   // 思维导图线条的颜色
      },
      zoom: 2,
      maxZoom: 10,
      minZoom: 1
    }
    _jm = jsMind.show(js_options)
    
    var mind = {
      "meta":{
        "name":"jsMind remote",
        "author":"hizzgdev@163.com",
        "version":"0.2"
      },
      "format":"node_tree",
      "data":{"id":"root","topic":"jsMind","children":[
        {"id":"easy","topic":"Easy","direction":"left","children":[
          {"id":"easy1","topic":"Easy to show"},
          {"id":"easy2","topic":"Easy to edit"},
          {"id":"easy3","topic":"Easy to store"},
          {"id":"easy4","topic":"Easy to embed"},
          {"id":"other3","background-image":"ant.png", "width": "100", "height": "100"}
        ]},
        {"id":"open","topic":"Open Source","direction":"right","children":[
          {"id":"open1","topic":"on GitHub", "background-color":"#eee", "foreground-color":"blue"},
          {"id":"open2","topic":"BSD License"}
        ]},
        {"id":"powerful","topic":"Powerful","direction":"right","children":[
          {"id":"powerful1","topic":"Base on Javascript"},
          {"id":"powerful2","topic":"Base on HTML5"},
          {"id":"powerful3","topic":"Depends on you"}
        ]},
        {"id":"other","topic":"test node","direction":"left","children":[
          {"id":"other1","topic":"I'm from local variable"},
          {"id":"other2","topic":"I can do everything"}
        ]}
      ]}
    }
    _jm.show(mind)

    document.addEventListener('mousewheel', function (event) {
      var down = true // 定义一个标志，当滚轮向下滚时，执行一些操作
      down = event.wheelDelta ? event.wheelDelta < 0 : event.detail > 0
      if (down) {
        // 缩小
        if (js_options.zoom > js_options.minZoom) {
          _jm.view.zoomOut()
          js_options.zoom--
        }
      } else {
        // 放大
        if (js_options.zoom <= js_options.maxZoom) {
          _jm.view.zoomIn()
          js_options.zoom++
        }
      }
      _jm.view.resize()
    })

    window.onresize = function () {
      // _jm.view.resize()
      // 或者
      _jm.resize()
    }
</script>
</body>
</html>
